<template>
  <div id="app">
    <nar-component ref="nav"></nar-component>
    <router-view/>
    <music-control ref="control"></music-control>
  </div>
</template>

<script>
import NarComponent from './components/NavComponent.vue'
import MusicControl from './components/MusicControl.vue'
export default {
  name: 'App',
  data () {
    return {
      playSongId: '',
      playList: [],
      index: '',
      context: ''
    }
  },
  watch: {
    index: function () { // index改变时，通知MusicControl切换歌曲
      let obj = {songId: this.playList[this.index].data.songmid, albumId: this.playList[this.index].data.albumid, songName: this.playList[this.index].data.songname, index: this.index}
      this.playSongId = obj.songId
      this.$refs.control.playMusic(obj)
      this.$refs.nav.setPlaySongId(this.playSongId)
      this.context.playSongId = this.playSongId
    }
  },
  components: {NarComponent, MusicControl},
  mounted: function () {
  },
  methods: {
    playMusic: function (obj) {
      console.log(obj)
      this.context = obj.context
      this.index = obj.index
    }
  }
}
</script>

<style>
html,body{margin: 0;padding: 0 0;background: #fbfcff}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 50px 0
}
</style>
